<template>
  <div class="publish_warpper">
    <PublishView
      :link="link"
      :name="name"
      @handleOpen="handleOpen"
      @handleCopy="handleCopy"
    />
  </div>
</template>
<script lang="ts">
import { useSettingBasicStore } from '@/store/setting';
import { message } from 'ant-design-vue';
import { computed, defineComponent } from 'vue';
import PublishView from './PublishView.vue';

export default defineComponent({
  components: { PublishView },
  setup() {
    const settingStore = useSettingBasicStore();

    const link = computed<string>(
      () => `${window.location.origin}/#/answer/index?id=${settingStore.queId}`,
    );

    const handleOpen = () => {
      window.open(link.value);
    };

    const handleCopy = () => {
      const cInput = document.createElement('input');
      cInput.value = link.value;
      document.body.appendChild(cInput);
      cInput.select(); // 选取文本域内容;
      // 执行浏览器复制命令
      // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
      // Input要在正常的编辑状态下原生复制方法才会生效
      document.execCommand('Copy');
      message.success('链接复制成功');
      /// 复制成功后再将构造的标签 移除
      cInput.remove();
    };

    const name = computed(() => settingStore.questionaire?.queTitle);
    return { link, handleOpen, handleCopy, name };
  },
});
</script>
<style lang="less" scoped>
.publish_warpper {
  width: 846px;
  display: flex;
  flex-direction: column;
  padding-top: 24px;
  background-color: white;
  border-radius: 8px;
  margin: 24px;
  padding: 24px;
}
</style>
